import React, { Component } from 'react';
import {
    Platform,
    StyleSheet,
    Text,
    View,
    Button,
    TextInput,
    FlatList,
    RefreshControl,
    ActivityIndicator,
    Alert,
    AsyncStorage,
    TouchableOpacity,
    Image,
    Modal,
    DeviceInfo
} from 'react-native';
import PropTypes from 'prop-types';
import TimeSpan from './model/TimeSpan';
export const TimeSpans = [new TimeSpan('今 天', 'since=daily'),
    new TimeSpan('本 周', 'since=weekly'), new TimeSpan('本 月', 'since=monthly')]

export default class TrendingDialog extends Component {
    state = {
        visible:false
    };
    // 打开弹窗
    show(){
        this.setState({
            visible:true
        })
    };
    // 关闭弹窗
    dismiss(){
        this.setState({
            visible:false
        })
    };
    onSelectTimeSpan(timeSpan){
        this.setState({
            timeSpan:timeSpan,
            visible: false
        })
    }
    render(){
        /**
         * onColse 关闭弹窗的回调函数
         * menus 内容
         * onSelect 点击相对应的item的回调函数
         * theme 用户自定义主题
         */
        const {onClose, onSelect } = this.props;
        return (
            <Modal
                transparent={true}
                visible={this.state.visible}
                onRequestClose={()=>onClose()}
            >
                <TouchableOpacity
                    style={styles.container}
                    onPress={()=>this.dismiss()}
                >
                    <Image
                        source={require('../res/images/arrow_top.png')}
                        style={styles.arrow}
                    />
                    <View
                        style={styles.content}
                    >
                        {
                            TimeSpans.map((item, index, arr)=>{
                                return <TouchableOpacity
                                    key={index}
                                    onPress={()=>{
                                        onSelect(item)
                                    }}
                                    underlayColor={'transparent'}
                                >
                                    <View style={{alignItems: 'center',flexDirection: 'row'}}>

                                        <Text
                                            style={styles.text}
                                        >
                                            {item.showText}
                                        </Text>
                                        {
                                            index !== TimeSpans.length - 1 ? <View
                                                style={styles.line}
                                            /> : null
                                        }
                                    </View>
                                </TouchableOpacity>
                            })
                        }
                    </View>
                </TouchableOpacity>
            </Modal>
        )
    }
}

TrendingDialog.propTypes = {
    onSelect: PropTypes.func.isRequired,
    onClose: PropTypes.func
};

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: 'rgba(0,0,0,0.6)',
        alignItems: 'center'
    },
    arrow: {
        marginTop: 56 + (DeviceInfo.isIPhoneX_deprecated ? 24 : 0),
        width: 16,
        height: 6,
        resizeMode: 'contain'
    },
    content: {
        backgroundColor: '#2f2f2f',
        opacity: 1,
        borderRadius: 3,
        paddingTop: 3,
        paddingBottom: 3,
        marginRight: 3
    },
    text: {
        fontSize: 16,
        color: 'white',
        fontWeight: '400',
        padding: 8,
        paddingLeft: 26,
        paddingRight: 26
    },
    line: {
        height: 0.3,
        backgroundColor: 'darkgray'
    },
    icon: {
        width: 16,
        height: 16,
        margin: 10,
        marginLeft: 15
    }
})

